<template>
  <div class="spot-list">
    <div v-if="!props.spotList || props.spotList.length === 0" class="empty-state">
      <el-empty description="暂无收藏景点" />
    </div>
    <el-row v-else :gutter="16">
      <el-col :span="8" v-for="(item, index) in props.spotList" :key="item?.id || index">
        <el-card style="margin-bottom: 16px">
          <el-link @click="goSpotDetail(item?.id)" :underline="false">
            <el-avatar
              :src="formatImageUrl(item?.spotAvatar)"
              :original-src="item?.spotAvatar"
              size="large"
              style="margin-right: 10px"
              @error="handleImageError"
            />
            <div class="content">
              <div class="title">{{ item?.spotName || '未命名景点' }}</div>
              <div class="description">
                {{ item?.spotAddress || '地址未知' }}
              </div>
              <div class="tags">
                <el-tag
                  v-for="(tag, tagIndex) in getSpotTags(item)"
                  :key="tagIndex"
                  style="margin-right: 5px"
                >
                  {{ tag }}
                </el-tag>
              </div>
              <div class="stats">
                <div class="icon-item">
                  <el-icon :size="16">
                    <View />
                  </el-icon>
                  <span>{{ item?.viewNum || 0 }}</span>
                </div>
                <div class="icon-item">
                  <el-icon :size="16">
                    <Star />
                  </el-icon>
                  <span>{{ item?.favourNum || 0 }}</span>
                </div>
              </div>
            </div>
          </el-link>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from "vue";
import { useRouter } from "vue-router";
import { ElTag, ElIcon, ElEmpty } from "element-plus";
import { View, Star } from "@element-plus/icons-vue";

let $router = useRouter();
const props = defineProps({
  spotList: {
    type: Array,
    required: true,
    default: () => []
  }
});

// 处理图片加载错误
const handleImageError = (e) => {
  const originalSrc = e.target.getAttribute('original-src') || '未知';
  console.error(`景点图片加载失败: ${originalSrc}`);
  
  // 已经是默认图片时不再重复设置，避免无限循环
  if (originalSrc !== '/images/default-spot.png') {
    e.target.src = '/images/default-spot.png';
  }
};

// 处理图片URL，确保格式正确
const formatImageUrl = (url) => {
  if (!url) return '/images/default-spot.png';
  
  // 如果是完整URL（以http或https开头），直接返回
  if (url.startsWith('http://') || url.startsWith('https://')) {
    return url;
  }
  
  // 如果是相对路径但不是以/开头，添加/
  if (!url.startsWith('/')) {
    return '/' + url;
  }
  
  return url;
};

// 安全地获取景点标签列表
const getSpotTags = (item) => {
  if (!item) return [];
  
  // 如果已经是数组，直接返回
  if (Array.isArray(item.spotTagList)) {
    return item.spotTagList;
  }
  
  // 如果是JSON字符串，尝试解析
  if (typeof item.spotTags === 'string') {
    try {
      return JSON.parse(item.spotTags);
    } catch (e) {
      console.error('解析景点标签失败:', e);
      return [];
    }
  }
  
  return [];
};

const goSpotDetail = (id: number) => {
  if (!id) {
    console.error('景点ID不存在，无法跳转到详情页');
    return;
  }
  $router.push("/user/spot/detail/" + id);
};
</script>

<style scoped lang="scss">
.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 0;
}

.spot-list .content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.spot-list .title {
  font-size: 18px;
  font-weight: bold;
  margin-left: 10px;
}

.spot-list .description {
  font-size: 14px;
  margin: 10px 0 0 10px;
  color: #888;
}

.spot-list .tags {
  margin: 10px 0 0 10px;
}

.spot-list .stats {
  display: flex;
  align-items: center;
  margin: 10px 0 0 10px;
}

.spot-list .icon-item {
  display: flex;
  align-items: center;
  margin-right: 16px;
  color: #666;

  span {
    margin-left: 4px;
    font-size: 14px;
  }
}
</style>
